<template>
  <!--主题设置-->
  <r-drawer class="theme" width="200px" title="主题设置" v-bind="$attrs">
    <div class="theme__color">
      <div
        :key="index"
        :style="{ background: color }"
        @click="globalStyle['--baseColor'].value = color"
        v-for="(color, index) in colorList"
      >
        <i
          class="resume resume-color_checked"
          v-if="globalStyle['--baseColor'].value === color"
        />
      </div>
    </div>
    <template v-for="(item, key) in globalStyle">
      <div class="theme__global" :key="key" v-if="!item.isHidden">
        <span>{{ item.label }}</span>
        <input v-model="item.value" />
      </div>
    </template>
  </r-drawer>
</template>

<script>
import RDrawer from "../base/RDrawer";
import { inject } from "vue";
const colorList = [
  "lightskyblue",
  "whitesmoke",
  "orangered",
  "hotpink",
  "orange",
  "greenyellow",
  "lightgreen",
  "mediumpurple",
  "crimson",
  "deepskyblue",
  "black",
  "#A29177",
];
export default {
  name: "theme-setting",
  components: { RDrawer },
  setup() {
    const globalStyle = inject("globalStyle") || [];
    return {
      globalStyle,
      colorList,
    };
  },
};
</script>

<style scoped lang="less">
.theme {
  &__color {
    height: 144px;
    padding: 10px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    > * {
      width: 36px;
      height: 36px;
      border-radius: 18px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;

      &:hover {
        border: 1px solid black;
      }

      i {
        color: white;
        font-size: 20px;
      }
    }
  }

  &__global {
    margin-bottom: 10px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;

    input {
      width: 80px;
      border-radius: 3px;
    }
  }
}
</style>
